import React, {Component} from 'react';
import './index.css'

class Item extends Component {

  state = {
    isActive: false
  }

  handleMouseEvent = isActive => e => this.setState({isActive})

  render() {
    const {isActive} = this.state
    const {todo, checkTodo, deleteTodo} = this.props
    return (
      <li onMouseEnter={this.handleMouseEvent(true)}
          onMouseLeave={this.handleMouseEvent(false)}
          style={{backgroundColor: isActive ? 'lightgray' : 'white'}}>
        <label>
          <input type="checkbox" checked={todo.done} onChange={e => checkTodo(todo.id)}/>
          <span>{todo.title}</span>
        </label>
        <button className="btn btn-danger"
                style={{display: isActive ? 'block' : 'none'}}
        onClick={e => deleteTodo(todo.id)}>
          删除
        </button>
      </li>
    );
  }
}

export default Item;